
<template>
    <div>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination> 
    </div>
</template>

<script>
    // 分页器公共组件
    export default {
        name :"Pagination",
        props:["total","pagesize","currentPage"],

        data(){
            return {
                // currentPage:1
            }
        },
        methods:{
            handleSizeChange(pagesize){
                // 每页数据条数
                console.log(pagesize)
                // 子传父到父组件中
                this.$emit("sendPageSzie", pagesize)
            },
            handleCurrentChange(cpage){
                // 点击的页码
                console.log(cpage)
                this.$emit("sendPage", cpage)
            }

        },

    }
</script>

<style lang="scss" scoped>

</style>